<template>
    <div class="article-list" ref="art">
        <!-- van-pull-refresh 为下拉刷新标签 -->
        <!-- success-text：为刷新成功提示文本  success-duration：为文本显示时长-->
        <van-pull-refresh v-model="refreshing" :success-text="refreshSuccessText" success-duration="1000" @refresh="onRefresh">
            <van-list 
                v-model="loading" 
                :finished="finished" 
                finished-text="没有更多了" 
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                @load="onLoad"
            >
                <article-item v-for="article in articleList" :key="article.art_id" :article="article"></article-item>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { getArticles } from '@/api/article';
import ArticleItem from '@/components/article-item'

export default {
    name: 'ArticleList',
    components: {
        ArticleItem
    },
    props: {
        channel: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            articleList: [], //文章列表
            loadCount: 0, //记录加载次数
            loading: false, //控制加载中的loading状态
            finished: false, //控制加载结束状态
            first_Pretimestamp: '', //第一次加载时的下一页时间戳
            pre_timestamp: '', //下一页时间戳
            error: false, //控制加载失败的提示状态
            refreshing: false, //控制下拉刷新状态,下拉时refreshing值会自动变为true
            refreshSuccessText: '刷新成功' //刷新成功时的提示文字
        }
    },
    methods: {
        // list 初始化后会触发一次 load 事件，用于加载第一屏的数据
        // 滚动到底部时会再次触发 load 事件
        // 如果一次请求数据条数较少，导致列表内容无法铺满当前屏幕，会再次触发load
        onLoad() {
            getArticles({
                channel_id: this.channel.id, //频道id
                // timestamp可以理解为请求的页码，请求第一页数据为当前最新时间戳
                // 下一页时间戳会在请求结果中返回给你
                timestamp: this.pre_timestamp || Date.now() //Date.now()为当前时间戳
            }).then(({ data }) => {
                console.log(data)
                const results = data.data.results
                this.articleList.push(...results)
                // 1 加载状态结束
                this.loading = false;
                // 2 判断数据是否全部加载完成
                if (results.length) {
                    // 有数据,则更新获取下一页的时间戳
                    this.pre_timestamp = data.data.pre_timestamp
                    this.loadCount++
                    // 记录第一次加载时的下一页时间戳
                    if(this.loadCount === 1) {
                        this.first_Pretimestamp = data.data.pre_timestamp
                        // console.log(this.first_Pretimestamp)
                    }
                } else {
                    // 没有数据了，将 finished 设为 true;
                    this.finished = true
                }
            }).catch((err) => {
                // 在调试时设为无网络模式，可看见请求失败的效果
                console.log('请求失败', err)
                this.loading = false;
                this.error = true
            })
        },
        // 当下拉刷新时会触发调用该函数
        onRefresh() {
            // 1 请求获取最新数据，然后将数据追加到列表顶部
            getArticles({
                channel_id: this.channel.id, 
                timestamp: Date.now() //Date.now()为当前时间戳
            }).then(({ data }) => {
                // 如果当前刷新出的下一页时间戳 为 第一次加载时的下一页时间戳，说明无最新数据
                if(data.data.pre_timestamp === this.first_Pretimestamp) {
                    this.refreshing = false;
                    this.refreshSuccessText = '当前无最新数据'
                    return
                }
                //否则，追加数据到列表顶部，并将 第一次加载时的下一页时间戳 更新为 当前刷新出的下一页时间戳
                const results = data.data.results
                this.articleList.unshift(...results)
                this.first_Pretimestamp = data.data.pre_timestamp
                // 2 关闭下拉刷新的状态提示
                this.refreshing = false
            }).catch((err) => {
                // 在调试时设为无网络模式，可看见刷新失败的效果
                this.refreshing = false;
                this.refreshSuccessText = '刷新失败'
            })
            
        }
    }
}
</script>

<style lang="less" scoped>
.article-list {
    height: 79vh;
    overflow-y: auto;
}
</style>